<template>
        <div class='iconbar' :class="'iconbar-' + iconbarColor">
            <i :class='iconClass'></i>
            <span class='icontext' v-text='iconText'></span>
            <slot></slot> 
        </div>      
</template>
<script>
    export default{
        data(){
            return {

            }
        },
        props:['iconbarColor','iconClass','iconText'],
    }
</script>
<style lang='scss'>
    /* IconBar.vue */
    @import '../assets/css/function';
    $iconbar-color : (red,#e84c3d),(green,#8fc31f),(purple,#9b57b5),(blue,#3498db);
    @each $c,$color in $iconbar-color {
        .iconbar-#{$c}{
            background:$color;
        }
    }
    .iconbar{
        position:relative;
        display:inline-flex;
        /* 本身作为 inline会与其他的inline产生间距,父容器使用flex可解决这个问题 */
        justify-content:center;
        align-items:center;
        width:pxtorem(70px) ;
        height:pxtorem(70px);
        max-height:80px;
        flex-flow:column wrap;
        border-radius:pxtorem(4px);
        i{
            font-size:pxtorem(40px);
            color:white;
        }
        span.icontext{
            font-size:pxtorem(14px);
            color:white;
        }
    }

</style>